<template>
  <div class="app-container">
    <h1 ref="myh12">App 根组件</h1>
    <hr />
    <button @click="comName = 'Left'">展示Left</button>
    <button @click="comName = 'Right'">展示Right</button>
    <hr />
    <div class="box">
      <!--  keep-alive是缓存 组件不被销毁的作用-->
      <!-- 通过include和exclude选择需要缓存的组件，并且只能二选一 -->
      <keep-alive include="Left,Right"> 
        <components :is="comName"></components>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Left from "@/components/Left.vue";
import Right from "@/components/Right.vue";

export default {
  data() {
    return {
      // 要展示组件的名字
      comName: "Left",
    };
  },
  components: {
    Left,
    Right,
  },
};
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
